<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="tabClick">
      <el-tab-pane label="学生画像" name="1">
        <div>
          <div style="padding-top:15px;padding-left:10px;">
            <el-select
              size="small"
              v-model="listQuery.AreaCode"
              placeholder="区域"
              clearable
              style="width: 150px;margin-right: 15px;"
              class="filter-item"
              @change="AreaSearch"
            >
              <el-option
                v-for="item in areaDatas"
                :key="item.AreaCode"
                :label="item.AreaName"
                :value="item.AreaCode"
              ></el-option>
            </el-select>
            <el-select
              size="small"
              v-model="listQuery.ProvinceCode"
              placeholder="省份"
              clearable
              style="width: 150px;margin-right: 15px;"
              class="filter-item"
              @change="ProvinceSearch"
            >
              <el-option
                v-for="item in provinceDatas"
                :key="item.ProvinceCode"
                :label="item.ProvinceName"
                :value="item.ProvinceCode"
              ></el-option>
            </el-select>
            <el-select
              size="small"
              v-model="listQuery.CityCode"
              placeholder="城市"
              clearable
              style="width: 250px;margin-right: 15px;"
              class="filter-item"
              @change="CitySearch"
            >
              <el-option
                v-for="item in cityDatas"
                :key="item.CityCode"
                :label="item.CityName"
                :value="item.CityCode"
              ></el-option>
            </el-select>
          </div>
          <div style="padding-top:20px;padding-bottom:10px;padding-left:10px;">
            <el-input
              v-model.trim="listQuery.DealerCode"
              size="small"
              placeholder="经销商代码"
              style="width: 150px;margin-right: 15px;"
              class="filter-item"
              @keyup.enter.native="getList(1)"
            />
            <el-input
              v-model.trim="listQuery.DealerName"
              size="small"
              placeholder="经销商名称"
              style="width: 400px;margin-right: 15px;"
              class="filter-item"
              @keyup.enter.native="getList(1)"
            />
            <el-input
              v-model.trim="listQuery.ManagementCode"
              size="small"
              placeholder="一级代码"
              style="width: 150px;margin-right: 15px;"
              class="filter-item"
              @keyup.enter.native="getList(1)"
            />
            <el-input
              v-model.trim="listQuery.ManagementName"
              size="small"
              placeholder="管理体系简称"
              style="width: 200px;margin-right: 15px;"
              class="filter-item"
              @keyup.enter.native="getList(1)"
            />
            <el-input
              v-model.trim="listQuery.UserName"
              size="small"
              placeholder="用户姓名"
              style="width: 150px;margin-right: 15px;"
              class="filter-item"
              @keyup.enter.native="getList(1)"
            />
            <el-button
              style="width: 100px;"
              type="primary"
              @click="getList(1)"
              size="small"
              icon="el-icon-search"
            >查询</el-button>
          </div>
        </div>
        <div>
          <el-table
            v-loading="loading"
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            :data="views"
            style="width: 100%;margin-top:30px;"
            border
            @sort-change="sortChange"
          >
            <el-table-column label="区域">
              <template slot-scope="scope">{{ scope.row.AreaName }}</template>
            </el-table-column>
            <el-table-column label="省份">
              <template slot-scope="scope">{{ scope.row.ProvinceName }}</template>
            </el-table-column>
            <el-table-column label="体系">
              <template slot-scope="scope">{{ scope.row.ManagementName }}</template>
            </el-table-column>
            <el-table-column label="姓名">
              <template slot-scope="scope">{{ scope.row.UserName }}</template>
            </el-table-column>
            <el-table-column label="经销商代码">
              <template slot-scope="scope">{{ scope.row.AgentNumber }}</template>
            </el-table-column>
            <el-table-column label="经销商名称">
              <template slot-scope="scope">{{ scope.row.AgentName }}</template>
            </el-table-column>
            <el-table-column label="积分" sortable="custom" prop="Credit" width="75">
              <template slot-scope="scope">{{ scope.row.Credit }}</template>
            </el-table-column>
            <el-table-column label="头衔">
              <template slot-scope="scope">{{ scope.row.ForumTitle }}</template>
            </el-table-column>
            <el-table-column label="发帖" sortable="custom" prop="PostedNum" width="75">
              <template slot-scope="scope">{{ scope.row.PostedNum }}</template>
            </el-table-column>
            <el-table-column label="回帖" sortable="custom" prop="ReplyNum" width="75">
              <template slot-scope="scope">{{ scope.row.ReplyNum }}</template>
            </el-table-column>
            <el-table-column label="回复他人" sortable="custom" prop="ReplyOtherNum">
              <template slot-scope="scope">{{ scope.row.ReplyOtherNum }}</template>
            </el-table-column>
            <el-table-column label="已报名课程" sortable="custom" prop="CourseApplyNum">
              <template slot-scope="scope">{{ scope.row.CourseApplyNum }}</template>
            </el-table-column>
            <el-table-column label="已完成课程" sortable="custom" prop="CourseFinishNum">
              <template slot-scope="scope">{{ scope.row.CourseFinishNum }}</template>
            </el-table-column>
            <el-table-column label="参加考试" sortable="custom" prop="ExamdNum">
              <template slot-scope="scope">{{ scope.row.ExamdNum }}</template>
            </el-table-column>
            <el-table-column label="考试平均分" sortable="custom" prop="AvgScore">
              <template slot-scope="scope">{{ scope.row.AvgScore }}</template>
            </el-table-column>
          </el-table>
        </div>

        <div style="margin-top:30px">
          <go-page
            v-model="listQuery.Page"
            :pageSize="listQuery.PageSize"
            :total="listQuery.Total"
            @pagination="getList()"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="教师画像" name="2">
        <div>
          <div style="padding-top:15px;padding-left:10px;">
            <el-input
              v-model.trim="listQuery.UserName"
              size="small"
              placeholder="用户姓名"
              style="width: 150px;margin-right: 15px;"
              class="filter-item"
              @keyup.enter.native="getListTea(1)"
            />
            <!-- <el-input
              v-model.trim="listQuery.Company"
              size="small"
              placeholder="公司名称"
              style="width: 400px;margin-right: 15px;"
              class="filter-item"
              @keyup.enter.native="getListTea(1)"
            />-->
            <el-button
              style="width: 100px;"
              type="primary"
              @click="getListTea(1)"
              size="small"
              icon="el-icon-search"
            >查询</el-button>
          </div>
        </div>
        <div>
          <el-table
            v-loading="loading"
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            :data="viewsTea"
            style="width: 100%;margin-top:30px;"
            border
            @sort-change="sortChangeTea"
          >
            <el-table-column label="姓名">
              <template slot-scope="scope">{{ scope.row.UserName }}</template>
            </el-table-column>
            <!-- <el-table-column label="公司">
              <template slot-scope="scope">{{ scope.row.Company }}</template>
            </el-table-column>-->
            <el-table-column label="积分" sortable="custom" prop="Credit">
              <template slot-scope="scope">{{ scope.row.Credit }}</template>
            </el-table-column>
            <el-table-column label="头衔">
              <template slot-scope="scope">{{ scope.row.ForumTitle }}</template>
            </el-table-column>
            <el-table-column label="发布的课程数量" sortable="custom" prop="CourseOwnerNum">
              <template slot-scope="scope">{{ scope.row.CourseOwnerNum }}</template>
            </el-table-column>
            <el-table-column label="教过的课程数量" sortable="custom" prop="CourseTeachedNum">
              <template slot-scope="scope">{{ scope.row.CourseTeachedNum }}</template>
            </el-table-column>
            <el-table-column label="教过的课程评价" sortable="custom" prop="CourseScoreAvg">
              <template slot-scope="scope">{{ scope.row.CourseScoreAvg }}</template>
            </el-table-column>
            <el-table-column label="个人评价" sortable="custom" prop="PeopleScoreAvg">
              <template slot-scope="scope">{{ scope.row.PeopleScoreAvg }}</template>
            </el-table-column>
          </el-table>
        </div>

        <div style="margin-top:30px">
          <go-page
            v-model="listQuery.Page"
            :pageSize="listQuery.PageSize"
            :total="listQuery.Total"
            @pagination="getListTea()"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { reqGetAreaCitys } from "@/api/areacity";
import { reqUserPicStuReport, reqUserPicTeaReport } from "@/api/report/userpic";

import GoPage from "./components/gopage";

export default {
  components: {
    GoPage
  },
  data() {
    return {
      listQuery: {
        AreaCode: null,
        ProvinceCode: null,
        CityCode: null,
        CourseName: "",
        DealerCode: "",
        DealerName: "",
        UserName: "",
        Company: "",
        ManagementCode: "",
        ManagementName: "",
        SearchBegin: new Date("2019-08-01"),
        SearchEnd: new Date(),
        Page: 1,
        PageSize: 8,
        Total: 0,
        OrderBy: "Credit",
        IsAsc: true
      },
      query: {
        Page: 1,
        PageSize: 10000,
        Total: 0,
        OrderBy: "AreaCode",
        IsAsc: true,
        TypeLevel: -1,
        AreaCode: -1,
        AreaName: "",
        ProvinceCode: -1,
        ProvinceName: "",
        CityCode: -1,
        CityName: ""
      },
      loading: true,
      activeName: "1",
      views: [],
      viewsTea: [],
      areaCitys: [],
      areaDatas: [],
      provinceDatas: [],
      cityDatas: []
    };
  },
  computed: {
    // 计算属性，只要相关联的值没有改变，直接返回，不再进行计算，与方法区别，缓存
  },
  created() {
    // 实例创建完成后执行的代码
    this.getList();
    this.searchInit();
  },
  methods: {
    // -----------------------------------------------初始化模块
    // list
    async getList(page1) {
      this.loading = true;
      if (page1 === 1) {
        this.listQuery.Page = 1;
      }
      let res = await reqUserPicStuReport(this.listQuery);
      if (res.code === 200) {
        this.views = res.data.Items;
        this.listQuery.Total = res.data.TotalItems;
      }
      this.loading = false;
    },
    async getListTea(page1) {
      this.loading = true;
      if (page1 === 1) {
        this.listQuery.Page = 1;
      }
      let res = await reqUserPicTeaReport(this.listQuery);
      if (res.code === 200) {
        this.viewsTea = res.data.Items;
        this.listQuery.Total = res.data.TotalItems;
      }
      this.loading = false;
    },
    // 区、省、市数据初始化
    async searchInit() {
      let res = await reqGetAreaCitys(this.query);
      if (res.code === 200) {
        this.areaCitys = res.data.Items;
        this.areaDatas = this.areaCitys.filter(s => s.TypeLevel === 1);
        this.provinceDatas = this.areaCitys.filter(s => s.TypeLevel === 2);
        this.cityDatas = this.areaCitys.filter(s => s.TypeLevel === 3);
      }
    },
    // -----------------------------------------------搜索模块
    // tabl切换
    tabClick(tab, event) {
      this.listQuery = {
        AreaCode: null,
        ProvinceCode: null,
        CityCode: null,
        CourseName: "",
        DealerCode: "",
        DealerName: "",
        UserName: "",
        Company: "",
        ManagementCode: "",
        ManagementName: "",
        SearchBegin: new Date("2019-08-01"),
        SearchEnd: new Date(),
        Page: 1,
        PageSize: 8,
        Total: 0,
        OrderBy: "Credit",
        IsAsc: true
      };
      const tabName = tab.name - 0;
      switch (tabName) {
        case 1:
          this.getList(1);
          break;
        case 2:
          this.getListTea(1);
          break;
        default:
          this.getList(1);
          break;
      }
    },
    // 区域下拉搜索
    AreaSearch() {
      if (this.listQuery.AreaCode) {
        this.provinceDatas = this.areaCitys.filter(
          s => s.TypeLevel === 2 && s.AreaCode === this.listQuery.AreaCode
        );
        this.cityDatas = this.areaCitys.filter(
          s => s.TypeLevel === 3 && s.AreaCode === this.listQuery.AreaCode
        );
      } else {
        this.provinceDatas = this.areaCitys.filter(s => s.TypeLevel === 2);
        this.cityDatas = this.areaCitys.filter(s => s.TypeLevel === 3);
      }
      this.listQuery.ProvinceCode = null;
      this.listQuery.CityCode = null;
      this.getList(1);
    },
    // 省份下拉搜索
    ProvinceSearch() {
      if (this.listQuery.ProvinceCode) {
        this.cityDatas = this.areaCitys.filter(
          s =>
            s.TypeLevel === 3 && s.ProvinceCode === this.listQuery.ProvinceCode
        );
      } else {
        if (this.listQuery.AreaCode)
          this.cityDatas = this.areaCitys.filter(
            s => s.TypeLevel === 3 && s.AreaCode === this.listQuery.AreaCode
          );
        else this.cityDatas = this.areaCitys.filter(s => s.TypeLevel === 3);
      }
      this.listQuery.CityCode = null;
      this.getList(1);
    },
    // 城市下拉搜索
    CitySearch() {
      this.getList(1);
    },
    // table排序
    sortChange(data) {
      if (data.order === "ascending") this.listQuery.IsAsc = true;
      else this.listQuery.IsAsc = false;
      this.listQuery.OrderBy = data.prop;
      this.getList(1);
    },
    sortChangeTea(data) {
      if (data.order === "ascending") this.listQuery.IsAsc = true;
      else this.listQuery.IsAsc = false;
      this.listQuery.OrderBy = data.prop;
      this.getListTea(1);
    }
    // -----------------------------------------------业务操作模块
  }
};
</script>

<style lang="scss" scoped>
</style>